import { ReactNode } from 'react';
import EditButton from './editbutton';
import DelButton from './delbutton';

export interface Props {
	id: string;
	deldlgtitle?: string;
	delapi: string;
	editdlgtitle?: string;
	children: ReactNode;
	onSaveEdit(): Promise<true | string>;
}

export default function OpterationButtons(props: Props) {
	return <>
		<div className='container'>
			<EditButton dlgtitle={props.editdlgtitle} onSave={props.onSaveEdit} >{props.children}</EditButton>
			<DelButton query={{ id: props.id }} dlgtitle={props.deldlgtitle} api={props.delapi} />
		</div>
		<style jsx>{`
.container{
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 1rem;
	flex-wrap: nowrap;
}
`}</style>
	</>;
}
